<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面板</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<!--
    默认的.panel组件所做的只是设置基本的边框(border)和内补(padding)来包含内容。
         .panel-default:默认样式
         .panel-heading:面板头
         .panel-body:面板主体内容
-->
<div class="panel panel-warning">

    <div class="panel-heading">
        <h2 align="center">明星合计</h2>
    </div>
    <div class="panel-body">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <div class="thumbnail">
                        <img src="picture/张博文的最爱.png" style="width: 100%;height: 360px">
                        <h3>玩偶姐姐</h3>
                        <p>代表作《森林》《一日女友》《海岛生活》推特粉丝:3百多w 微博粉丝:3百多W 推特粉丝:3百多w    </p>
                        <button class="btn btn-default" onclick="shoucangchenggong()">
                            <span class="glyphicon glyphicon-heart"></span> 喜欢
                        </button>
                        <button class="btn btn-info" onclick="pingjiachenggong()">
                            <span class="glyphicon glyphicon-pencil"></span> 评价
                        </button>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="thumbnail">
                        <img src="picture/周杰伦.webp" style="width: 100%;height: 360px">
                        <h3>周杰伦</h3>
                        <p>周杰伦 单曲:1596 专辑:37 MV:500 粉丝:142.5W英文名:Jay Chou 国籍:中国台湾</p>
                        <button class="btn btn-default" onclick="shoucangchenggong()">
                            <span class="glyphicon glyphicon-heart"></span> 喜欢
                        </button>
                        <button class="btn btn-info" onclick="pingjiachenggong()">
                            <span class="glyphicon glyphicon-pencil"></span> 评价
                        </button>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="thumbnail">
                        <img src="picture/邓紫棋.webp" style="width: 100%;height: 360px">
                        <h3>邓紫棋</h3>
                        <p>歌手、词曲作者、音乐制作人 1991年8月16日(农历：辛未羊年七月初七) 邓紫棋（G.E.M.）</p>
                        <button class="btn btn-default" onclick="shoucangchenggong()">
                            <span class="glyphicon glyphicon-heart"></span> 喜欢
                        </button>
                        <button class="btn btn-info" onclick="pingjiachenggong()">
                            <span class="glyphicon glyphicon-pencil"></span> 评价
                        </button>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="thumbnail">
                        <img src="picture/林俊杰.webp" style="width: 100%;height: 360px">
                        <h3>林俊杰</h3>
                        <p>林俊杰歌手,代表作《背对背拥抱》、《曹操》、《当你》 作品 1亿关注 15亿粉丝 59843123微博 歌手</p>
                        <button class="btn btn-default" onclick="pingjiachenggong()">
                            <span class="glyphicon glyphicon-heart"></span> 喜欢
                        </button>
                        <button class="btn btn-info" onclick="shoucangchenggong()">
                            <span class="glyphicon glyphicon-pencil"></span> 评价
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    function shoucangchenggong() {
        alert("收藏成功");
    }
    function pingjiachenggong() {
        alert("评价成功");
    }
</script>
</html>
